<template>
  <TableView
    ref="tableView"
    :table-attrs="{ api: getPage, descs: ['createTime'], payloadStyle: 'body', reloadOnModelChange: true, dicOptions: [] }"
    form-path="/tech-project/project-manage/information/ProjectsDashboard/{id}?tabTitle={projectName}"
    :search-model="searchForm"
    :delete-api="batchDelete"
    :toolbar-attrs="{ buttons: ['slot'] }">
    <template #toolbar-left>
      <div>
        <ElTag
          v-for="item in statusOptions"
          :key="item.value"
          :effect="item.value === searchForm.projectStatus ? 'dark' : null"
          style="margin-right: 14px; cursor: pointer"
          type="primary"
          @click="searchForm.projectStatus = item.value">
          {{ item.label }}
        </ElTag>
        <span style="margin-right: 10px">项目年度</span>
        <ElSelect v-model="searchForm.year" style="width: 200px" size="mini">
          <ElOption v-for="item in years" :key="item" :value="item" :label="`${item} 年`" />
        </ElSelect>
      </div>
    </template>
    <template #toolbar-right="{ del }">
      <ToolbarButton
        type="primary"
        icon="el-icon-plus"
        label="添加"
        @click="$router.push('/tech-project/project-manage/information/ProjectInformationForm/-1?tabTitle=新建项目')" />
      <ToolbarButton type="primary" icon="el-icon-delete" label="删除" @click="del" />
      <ToolbarButton type="primary" icon="el-icon-download" label="导出" @click="exportExcel" />
    </template>
    <template #columns>
      <TableColumn label="项目编号" prop="projectNo" />
      <TableColumn label="项目名称" clickable prop="projectName">
        <template #default="{ row }">
          <span style="color: var(--color-primary)">{{ row.projectName }}</span>
        </template>
      </TableColumn>
      <TableColumn label="项目类型" prop="projectType" dict-type="project_type" />
      <TableColumn label="部门" prop="departmentName" />
      <TableColumn label="项目负责人" prop="masterName">
        <template #default="{ row }">
          <span style="color: var(--color-primary)">{{ row.masterName }}</span>
        </template>
      </TableColumn>
      <TableColumn label="开始时间" prop="beginDateTime" />
      <TableColumn label="结束时间" prop="endDateTime" />
      <TableColumn label="状态" prop="projectStatus" dict-type="project_status" />
      <TableColumn label="进度" prop="progress">
        <template #default="{}">
          <ElProgress :percentage="50" :stroke-width="10" />
        </template>
      </TableColumn>
    </template>
    <template #search-form>
      <FormInput v-model="searchForm.projectName" label="项目名称" prop="projectName" />
      <FormInput v-model="searchForm.projectNo" label="项目编号" prop="projectNo" />
      <FormSelect v-model="searchForm.projectType" label="项目类型" prop="projectType" dict-type="project_type" />
      <FormInput v-model="searchForm.masterName" label="负责人" prop="masterName" />
      <FormInput v-model="searchForm.funds" label="经费" prop="funds" />
      <FormInput v-model="searchForm.departmentName" label="所属部门名称" prop="departmentName" />
      <FormInput v-model="searchForm.manageOrg" label="项目管理专业机构" prop="manageOrg" />
      <FormInput v-model="searchForm.summary" label="摘要" prop="summary" />
      <FormInput v-model="searchForm.topic" label="课题" prop="topic" />
      <FormInput v-model="searchForm.stage" label="项目研究阶段" prop="stage" />
    </template>
  </TableView>
</template>

<script>
  import { batchDelete, getPage, getYears } from './api'
  import { services } from '@/config'

  export default {
    name: 'ProjectsKanBan',
    data() {
      return {
        searchForm: {
          projectStatus: null,
          status: 2,
          year: null
        },
        statusOptions: [
          {
            label: '所有',
            value: null
          },
          {
            label: '未完成',
            value: 1
          },
          {
            label: '进行中',
            value: 2
          },
          {
            label: '已完成',
            value: 3
          }
        ],
        years: []
      }
    },
    async created() {
      const res = await getYears()
      this.years = res.data.data
    },
    methods: {
      getPage,
      batchDelete,
      exportExcel() {
        this.$downBlobFile(`${services.personnelService}fyprojectinfo/export`, null, '项目信息.xlsx', 'post', this.$refs.tableView.getPageQuery())
      }
    }
  }
</script>
